<template>
  <div class="dashboard-container">
    <div class="card-container">
      <el-card class="box-card" style="margin: 20px auto; width: 800px">
        <el-form
          ref="form"
          :model="form"
          label-width="120px"
          style="height: 100%"
        >
          <el-form-item ref="img" label="月兑付表：" prop="imageUrl">
            <Upload
              v-if="isEdit"
              @fileListChange="fileListChange"
              ref="myUpload"
              :drag="true"
              :accept="imgType"
              fileType="image"
              :filelist="myFileList"
            />
            <img
              @click="showPreview = true"
              class="my-img"
              style="object-fit:contain"
              v-else
              :src="form.imageUrl"
              alt=""
            />
          </el-form-item>
          <!-- <el-form-item
            label="月兑付表："
            prop="url"
            :rules="[{ required: true, message: '内容不能为空' }]"
          >
            <el-input
              :disabled="isEdit ? false : true"
              v-model="form.url"
              placeholder="请输入链接地址"
            ></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button
              v-if="!isEdit"
              type="primary"
              icon="el-icon-edit-outline"
              @click="
                () => {
                  this.isEdit = true;
                }
              "
              >编辑</el-button
            >
            <el-button
              v-else
              :loading="loading"
              type="warning"
              icon="el-icon-edit-outline"
              @click="onSubmit('form')"
              :disabled="!form.imageUrl"
              >保存</el-button
            >
          </el-form-item>
          <!-- <el-form-item label="预览：">
                        <iframe class="preview-box" :src="info.url" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" seamless width="375" height="600" frameborder="0"></iframe>
                    </el-form-item> -->
        </el-form>
      </el-card>
      <el-dialog :visible.sync="showPreview">
        <div class="my-img2">
          <img @click="showPreview = true" :src="form.imageUrl" alt="" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getDetail, update } from "@/api/monthCash";
import Tinymce from "@/components/Tinymce";
import { imgTypeArr } from "@/utils/enumConfig";
import Upload from "@/components/UploadFile";

export default {
  name: "Dashboard",
  components: {
    Upload
  },
  data() {
    return {
      info: {},
      isEdit: false,
      loading: false,
      imgType: imgTypeArr.join(","),
      showPreview: false,
      form: {
        imageUrl: "",
        myFileList: []
      }
    };
  },
  async created() {
    await this.getMonthCashDetail();
  },
  methods: {
    handleContent(val) {
      this["form"]["url"] = val;
    },
    onSubmit(formName) {
      const { validate } = this.$refs[formName];
      validate(valid => {
        if (valid) {
          this._submitData({ id: this.id || 1, ...this.form });
        }
      });
    },
    async getMonthCashDetail() {
      let data = await getDetail({ id: 1 }),
        _this = this;
      if (data) {
        this.info = data;
        this.id = data.id;
        Object.keys(_this.form).forEach(key => {
          if (key === "imageUrl") {
            if (data[key]) {
              let fileName = data[key].substring(
                data[key].lastIndexOf("/") + 1,
                data[key].length
              );
              this.myFileList = [{ name: fileName, url: data[key] }];
              _this["form"][key] = data[key];
            }
          }
        });
      }
    },
    async _submitData(params) {
      this.loading = true;
      let res = await update(params);
      console.log('resres',res)
      this.loading = false;
      if (res.code === 1) {
        this.isEdit = false;
        await getMonthCashDetail();
        this.$message({
          message: "保存成功！",
          type: "success",
          duration: 1 * 1000
        });
      }
    },
    fileListChange(arr) {
      if (arr.length === 0) {
        this["form"]["imageUrl"] = "";
      } else {
        this["form"]["imageUrl"] = arr[0]["url"];
        this.$refs.img.clearValidate();
      }
    }
  },
  computed: {}
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  text-align: center;
  height: 100%;
  div::-webkit-scrollbar {
    width: 0 !important;
    display: none;
  }
  ::v-deep .el-card__body {
    height: 100%;
  }
  .card-container {
    // width: 50%;
    // margin: 60px auto 30px;
    text-align: left;
    .my-card {
      height: 80vh;
      overflow-y: auto;
      margin: 30px 80px 0;
      .content {
        line-height: 1.5;
        text-indent: 2em;
      }
    }
    .edit-card {
      margin: 10px 0;
    }
    .input-row {
      margin: 20px 0 0;
    }
  }
  .my-img {
    width: 400px;
    height: 400px;
    cursor: pointer;
    margin: auto;
    object-fit: cover;
  }
  .my-img2{
      width: auto;
      height: auto;
      display: flex;
      justify-content: center;
      img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
